<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery word-break:keep-all Plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.word-break-keep-all.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/tomorrow.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//이 한 줄로 실행한다.
	$('.test').wordBreakKeepAll();

	//IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
	//$('.test').wordBreakKeepAll({OffForIE:true}); 
});
</script>
<style type="text/css">
body{
	text-align: center;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	font-family: "맑은 고딕", "Malgun Gothic", "나눔고딕", "nanumgothic";
}
.test-box{
	width: 120px;
	padding: 20px;
	border: 2px solid #ddd;
	text-align: left;
	display: inline-block;
	vertical-align: top;
	*display: inline;
	*zoom: 1;
}
.buttons{
	margin: 50px;
}
.desc{
	width: 600px;
	margin: 50px auto;
	text-align: left;
}
h1, .desc h2{
	margin-top: 30px; 
	padding: 10px 15px;
	background: #eee;
}
.copyright{
	font-size: 12px;
	color: #666;
}
.author{
	text-align: right;
}
pre{
	color: #666;
}
pre strong{
	color: #000;
}
ul{
	padding-left: 25px;
}
</style>
</head>
<body>
	<h1>jQuery word-break: keep-all 플러그인 ver 1.2.3 Demo</h1>
	<div class="buttons">
		<p>아래 버튼을 이용해 가로를 50px씩 늘리고 줄이면서 단어별로 끊어지는지 테스트해 보세요.</p>
		<input type="button" value="+50px" id="plus"/>
		<input type="button" value="-50px" id="minus"/>
	</div>
	<div class="test-box">
		<h2 class="test">플러그인 적용 (applied)</h2>
		<p class="test">다양한 태그에 테스트해 본 것입니다. Test target is vary tags.</p>
		<span class="test">이것은 span tag로 둘러싼 것입니다. 이것은 span tag로 둘러싼 것입니다.</span>
		<div class="test">이것은 div tag로 둘러싼 것입니다. <strong style="color: #666" > 이것은 div tag로 둘러싼 것입니다. </strong> <sub> (자식 HTML이 있어도 작동하는 것을 보여 줍니다.) </sub></div>
		<h3 class="test">이것은 h3 tag로 둘러싸고 중간에 줄바꿈이 
		있는 것입니다. 이것은 h3 tag로 둘러싼 것입니다.</h3>
		<p class="test">이것은 p tag로 둘러싼 것입니다. 이것은 p tag로 둘러싼 것입니다.</p>
		<a class="test" href="#">이것은 a tag로 둘러싼 것입니다. 이것은 a tag로 둘러싼 것입니다.</a>
		<ul>
			<li class="test">이것은 li tag로 둘러싼 것입니다. 이것은 li tag로 둘러싼 것입니다.</li>
		</ul>
	</div>
	<div class="test-box">
		<h2>플러그인 미적용 (not apply)</h2>
		<p>다양한 태그에 테스트해 본 것입니다. Test target is vary tags.</p>
		<span>이것은 span tag로 둘러싼 것입니다. 이것은 span tag로 둘러싼 것입니다.</span>
		<div>이것은 div tag로 둘러싼 것입니다. <strong style="color: #666" >이것은 div tag로 둘러싼 것입니다. </strong></div>
		<h3>이것은 h3 tag로 둘러싼 것입니다. 이것은 h3 tag로 둘러싼 것입니다.</h3>
		<p>이것은 p tag로 둘러싼 것입니다. 이것은 p tag로 둘러싼 것입니다.</p>
		<a href="#">이것은 a tag로 둘러싼 것입니다. 이것은 a tag로 둘러싼 것입니다.</a>
		<ul>
			<li>이것은 li tag로 둘러싼 것입니다. 이것은 li tag로 둘러싼 것입니다.</li>
		</ul>
	</div>
	<div class="desc">
		<h2>실행 방법 (How to Run)</h2>
		<pre><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.word-break-keep-all.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
	$('.target').wordBreakKeepAll();
	//IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
	//$('.test').wordBreakKeepAll({OffForIE:true}); 
});
&lt;/script&gt;</code></pre>
		<h2>플러그인 기타 정보 (etc)</h2>
		<div class="author">
			제작: 안형우(mytory@gmail.com)
		</div>
		<ul>
			<li>저작권은 jQuery와 같습니다. (License is <a href="http://jquery.org/license">http://jquery.org/license</a>) 카피라이트 헤더에만 손대지 않으면 상업용·개인용 다 무료입니다.</li>
			<li><a href="http://code.google.com/p/jquery-word-break-keep-all-plugin/">프로젝트 홈(Google Code)</a></li>
			<li><a href="http://code.google.com/p/jquery-word-break-keep-all-plugin/source/list">변경 이력(Changelog)</a></li>
			<li><a href="http://code.google.com/p/jquery-word-break-keep-all-plugin/issues/entry">오류를 보고해 주세요! (Please report error!)</a></li>
			<li>인터넷 익스플러로의 경우 단어별로 줄바꿈을 하게 하는 CSS 프로퍼티가 있습니다. <code>span</code>, <code>a</code> 같은 <code>display: inline</code> 요소는 <code>display:block</code>으로 만든 후 <code>word-break: keep-all; word-wrap: break-word;</code>를 인라인 스타일로 추가해 줍니다.</li>
			<li>나머지 브라우저의 경우 안의 단어들을 단어별로 <code>span</code> tag로 감싼 후 <code>white-space: nowrap;</code>을 인라인 스타일로 줘서 단어가 끊어지지 않게 합니다.</li>
			<li class="has-html-test"><a href="http://mytory.co.kr/archives/2801">제작동기와 더 자세한 CSS 원리 설명</a>은 블로그에 있습니다.</li>
			<li class="has-html-test">Tested in IE7-9,Chrome20,FF12 (이건 폼으로;; IE6는 윈7이라 테스트하기 넘 힘들다. 근데 이제 IE6는 테스트 안 해도 되겠지?)</li>
			<li>ver 1.2 부터 안에 태그가 있어도 작동합니다. 하지만 안에 태그가 없는 요소에 사용할 때 가장 훌륭하게 작동합니다. &lt;, &gt; 를 태그 외에 텍스트에 사용하지 않도록 주의하세요. 그런 경우 제대로 작동하지 않습니다.
				예컨대, 태그에서 <code>&lt;레프트21&amp;gt;</code> 이렇게 쓰는 경우 브라우저는 <레프트21&gt;이라고 제대로 렌더링하지만 이 플러그인은 오작동하게 됩니다.</li>
			<li>태그와 딱 맞붙어 있는 글자에는 nowrap을 붙이지 않습니다. 아래와 같은 요소에 적용하도록 하는 데 많은 노력이 들기 때문에 아직 구현하지 못했습니다.
				<br />
				<code>자료는 &lt;a href="http://domain.com"&gt;여기에서 다운&lt;/a&gt;받으세요.</code>
				<br />
				위 코드 중 '여기에서'를 <code>nowrap</code>으로 둘러싸게 하고 싶다면, 태그와 글자 사이에 한 칸을 띄워 주시면 됩니다.
				<br />
				<code>자료는 &lt;a href="http://domain.com"&gt; 여기에서 다운&lt;/a&gt;받으세요.</code>
				<br />
				그러나 이 플러그인을 이용해 '다운받으세요'를 <code>nowrap</code>으로 둘러쌀 방법은 현재로서는 없습니다. 
			</li>
		</ul>
	</div>
	
	<script type="text/javascript">
	//for example
	$('.test-box').animate({'width': '400px'},5000);
	$('#plus').click(function(){
		$('.test-box').animate({'width': '+=50'},1000);
	});
	$('#minus').click(function(){
		$('.test-box').animate({'width': '-=50'},1000);
	});
	$('.test-box a').click(function(){
		return false;
	});
	
	//안에 html 요소가 있을 때 에러 안 나는지 테스트.
	$('.has-html-test').wordBreakKeepAll();
	
	//code highlight
	hljs.initHighlightingOnLoad();
	</script>
</body>
</html>